<template>
  <div class="wrap">
    <labelContent title="基本信息">
      <div>
        <el-form
          ref="baseForm"
          :model="baseForm"
          :rules="rules1"
          label-width="150px"
          :disabled="islook"
        > 
          <el-form-item label="类型" >
            <el-radio-group v-model="baseForm.alliance_type">
              <el-radio v-for="item in allianceTypes" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="联系人姓名" prop="contacts_name">
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.contacts_name"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="联系人电话" prop="contacts_phone">
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.contacts_phone"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="联系人邮箱" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.contacts_email"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="baseForm.contacts_sex">
              <el-radio v-for="item in sexList" :key="item.value" :label="item.value">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="代理区域">
            <el-select
              class="mr16"
              @change="getShiList"
              v-model="addressArr.sf"
              placeholder="全部"
              clearable
            >
              <el-option
                v-for="item in sfList"
                :key="item.district"
                :label="item.district"
                :value="item.district"
              ></el-option>
            </el-select>
            <el-select
              class="mr16"
              @change="getXianList"
              v-model="addressArr.shi"
              placeholder="全部"
              clearable
            >
              <el-option
                v-for="item in shiList"
                :key="item.district"
                :label="item.district"
                :value="item.district"
              ></el-option>
            </el-select>
            <el-select v-model="addressArr.xian" placeholder="全部" clearable>
              <el-option
                v-for="item in xianList"
                :key="item.district"
                :label="item.district"
                :value="item.district"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="等级">
            <el-select
              v-model="baseForm.grade_id"
              placeholder="请选择"
            >
              <el-option
                v-for="item in levelList"
                :key="item.grade_id"
                :label="item.grade_name"
                :value="item.grade_id" 
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </labelContent>

    <labelContent title="营业执照信息（副本）">
      <div>
        <el-form
          ref="baseForm2"
          :model="baseForm"
          :rules="rules1"
          label-width="150px"
          :disabled="islook"
        >
          <el-form-item label="公司名称" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.alliance_name"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="营业执照注册号" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.company_license_serial"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="法定代表人姓名" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.principal_name"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="身份证号" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.principal_idcard"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="法人身份证电子版" >
            <div>
              <upimg :imgs.sync="imgs1" :islook="islook"></upimg>
            </div>
          </el-form-item>
          <!-- <el-form-item label="营业执照详细地址" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm2.discount"
              ></el-input>
            </div>
          </el-form-item> -->
          <el-form-item label="成立日期">
            <div>
              <el-date-picker value-format="timestamp" type="date" placeholder="选择日期" v-model="baseForm.company_create_time" ></el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="营业期限">
            <div>
              <el-date-picker
                class="mr15"
                v-model="licenseTime"
                value-format="timestamp"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
              <el-checkbox v-model="checked">永久</el-checkbox>
            </div>
          </el-form-item>
          <el-form-item label="注册资本" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.company_capital"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="经营范围" >
            <div>
              <el-input type="textarea" v-model="baseForm.business_scope"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="营业执照电子版" >
            <div>
              <upimg :imgs.sync="imgs2" :islook="islook"></upimg>
            </div>
          </el-form-item>
          <el-form-item label="公司所在地" >
            <el-select
              class="mr16"
              @change="getShiList2"
              v-model="addressArr2.sf"
              placeholder="全部"
              clearable
            >
              <el-option
                v-for="item in sfList2"
                :key="item.district"
                :label="item.district"
                :value="item.district"
              ></el-option>
            </el-select>
            <el-select
              class="mr16"
              @change="getXianList2"
              v-model="addressArr2.shi"
              placeholder="全部"
              clearable
            >
              <el-option
                v-for="item in shiList2"
                :key="item.district"
                :label="item.district"
                :value="item.district"
              ></el-option>
            </el-select>
            <el-select v-model="addressArr2.xian" placeholder="全部" clearable>
              <el-option
                v-for="item in xianList2"
                :key="item.district"
                :label="item.district"
                :value="item.district"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司详细地址" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.company_address"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="公司紧急联系人" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.company_contacts"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="公司紧急联系人手机" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.company_contacts_phone"
              ></el-input>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </labelContent>
    <labelContent title="开户银行许可证">
      <div>
        <el-form
          ref="baseForm3"
          :model="baseForm"
          :rules="rules1"
          label-width="150px"
          :disabled="islook"
        >
          <el-form-item label="公司名称" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.open_company_name"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="公司银行账号" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.bank_account"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="开户银行支行名称" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.bank_name"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item label="开户银行支行所在地" >
            <el-select
              class="mr16"
              @change="getShiList3"
              v-model="addressArr3.sf"
              placeholder="全部"
              clearable
            >
              <el-option
                v-for="item in sfList3"
                :key="item.district"
                :label="item.district"
                :value="item.district"
              ></el-option>
            </el-select>
            <el-select
              class="mr16"
              @change="getXianList3"
              v-model="addressArr3.shi"
              placeholder="全部"
              clearable
            >
              <el-option
                v-for="item in shiList3"
                :key="item.district"
                :label="item.district"
                :value="item.district"
              ></el-option>
            </el-select>
            <el-select v-model="addressArr3.xian" placeholder="全部" clearable>
              <el-option
                v-for="item in xianList3"
                :key="item.district"
                :label="item.district"
                :value="item.district"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开户行银行详细地址" >
            <div>
              <el-input
                class="w300"
                placeholder="请输入"
                v-model="baseForm.bank_address"
              ></el-input>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </labelContent>
    <labelContent title="合同附件">
      <div>
        <el-form
          label-width="150px"
        >
          <el-form-item label="合同附件">
            <upimg upType="file" :islook="islook" :imgs.sync="fileList" >
              <el-button slot="fileslot" type="text">下载模板</el-button>
            </upimg>
          </el-form-item>
        </el-form>
      </div>
    </labelContent>
    <div class="footer">
      <el-button @click="back">取 消</el-button>
      <el-button v-if="!islook" type="primary" @click="save">保存并返回</el-button>
    </div>
  </div>
</template>

<script>
import labelContent from "components/workComponents/labelContent";
import upimg from 'components/upimg/upimg';
import { getDistrictList } from "api/lineManagement/lineCommodity";
import allianceListAPI from "api/allianceBusinessMg/allianceListAPI";
import allianceLevelAPI from 'api/allianceBusinessMg/allianceLevelAPI'

export default {
  components: {
    labelContent,
    upimg
  },
  data() {
    return {
      islook: false,
      allianceTypes: [
        {value: 1, name: '加盟商'},
        {value: 2, name: '分公司'},
      ],
      sexList: [
        {value: 1, name: '男'},
        {value: 2, name: '女'},
      ],
      levelList: [
      ],
      checked: false,
      baseForm: {},
      baseForm2: {},
      baseForm3: {},
      rules1: {
        contacts_name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        contacts_phone: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
      },
      fileList: [],
      licenseTime: null, 
      addressArr: {
        sf: "",
        shi: "",
        xian: "",
      },
      sfList: [],
      shiList: [],
      xianList: [],
      addressArr2: {
        sf: "",
        shi: "",
        xian: "",
      },
      sfList2: [],
      shiList2: [],
      xianList2: [],
      addressArr3: {
        sf: "",
        shi: "",
        xian: "",
      },
      sfList3: [],
      shiList3: [],
      xianList3: [],
      imgs1: [],
      imgs2: [],
    }
  },
  methods: {
    // 获取省份
    async getSfList() {
      let res = await getDistrictList({ pid: "1" });
      this.sfList = res.rData;
    },
    async getShiList(val) {
      this.addressArr.shi = '' 
      this.addressArr.xian = '' 
      let id = this.sfList.find(
        (item) => item.district == val
      ).district_id;
      let res = await getDistrictList({ pid: id });
      this.shiList = res.rData;
    },
    async getXianList(val) {
      this.addressArr.xian = '' 
      let id = this.shiList.find(
        (item) => item.district == val
      ).district_id;
      let res = await getDistrictList({ pid: id });
      this.xianList = res.rData;
    },
    // 获取省份
    async getSfList2() {
      let res = await getDistrictList({ pid: "1" });
      this.sfList2 = res.rData;
    },
    async getShiList2(val) {
      this.addressArr2.shi = '' 
      this.addressArr2.xian = '' 
      let id = this.sfList2.find(
        (item) => item.district == val
      ).district_id;
      let res = await getDistrictList({ pid: id });
      this.shiList2 = res.rData;
    },
    async getXianList2(val) {
      this.addressArr2.xian = '' 
      let id = this.shiList2.find(
        (item) => item.district == val
      ).district_id;
      let res = await getDistrictList({ pid: id });
      this.xianList2 = res.rData;
    },
    // 获取省份
    async getSfList3() {
      let res = await getDistrictList({ pid: "1" });
      this.sfList3 = res.rData;
    },
    async getShiList3(val) {
      this.addressArr3.shi = '' 
      this.addressArr3.xian = '' 
      let id = this.sfList3.find(
        (item) => item.district == val
      ).district_id;
      let res = await getDistrictList({ pid: id });
      this.shiList3 = res.rData;
    },
    async getXianList3(val) {
      this.addressArr3.xian = '' 
      let id = this.shiList3.find(
        (item) => item.district == val
      ).district_id;
      let res = await getDistrictList({ pid: id });
      this.xianList3 = res.rData;
    },
    async getLevelList() {
      let res = await allianceLevelAPI('list')
      this.levelList = res.rData
    },
    async getDetail() {
      let res = await allianceListAPI('detail', {alliance_id: this.curId})
      let obj = res.rData[0]
      if(obj.alliance_area) {
        let arr = obj.alliance_area.split('-')
        this.addressArr.sf = arr[0]
        this.addressArr.shi = arr[1]
        this.addressArr.xian = arr[2]
      }

      if(obj.license_start_time && obj.license_end_time) {
        this.licenseTime = [obj.license_start_time*1000, obj.license_end_time*1000]
      }
      if(obj.principal_idcard_electronic) {
        this.imgs1 = obj.principal_idcard_electronic.split(',')
      }
      if(obj.company_create_time){
        obj.company_create_time = obj.company_create_time*1000
      }
      this.checked = obj.is_perpetual == 1  ? true : false
      if(obj.license_electronic) {
        this.imgs2 = obj.license_electronic.split(',')
      }
      if(obj.company_area) {
        let arr = obj.company_area.split('-')
        this.addressArr2.sf = arr[0]
        this.addressArr2.shi = arr[1]
        this.addressArr2.xian = arr[2]
      }
      if(obj.bank_area) {
        let arr = obj.bank_area.split('-')
        this.addressArr3.sf = arr[0]
        this.addressArr3.shi = arr[1]
        this.addressArr3.xian = arr[2]
      }
      if(obj.contract_accessory) {
        obj.contract_accessory = obj.contract_accessory.split(',')
        this.fileList = obj.contract_accessory.map(item => ({name: item, url: item}))
      }
      this.baseForm = obj
    },
    async save() {
      // ..
      await this.$refs.baseForm.validate()
      let data = {
        ...this.baseForm,
        ...this.baseForm2,
        ...this.baseForm3,
      }
      if(this.addressArr.xian) {
        data.alliance_area = [this.addressArr.sf, this.addressArr.shi, this.addressArr.xian].join('-')
      }
      if(data.company_create_time){
        data.company_create_time = ~~(data.company_create_time/1000)
      }
      if(this.licenseTime && this.licenseTime.length) {
        data.license_start_time = ~~(this.licenseTime[0]/1000)
        data.license_end_time = ~~(this.licenseTime[1]/1000)
      }
      if(this.imgs1.length) {
        data.principal_idcard_electronic = this.imgs1.join(',')
      }
      data.is_perpetual = this.checked ? 1 : 0
      if(this.imgs2.length) {
        data.license_electronic = this.imgs2.join(',')
      }
      if(this.addressArr2.xian) {
        data.company_area = [this.addressArr2.sf, this.addressArr2.shi, this.addressArr2.xian].join('-')
      }
      if(this.addressArr3.xian) {
        data.bank_area = [this.addressArr3.sf, this.addressArr3.shi, this.addressArr3.xian].join('-')
      }
      if(this.fileList.length) {
        let name = this.fileList.map(item => item.url).join(',')
        data.contract_accessory = name 
      }
      await allianceListAPI('add', data)
      this.$message.success('添加成功')
      this.back()
    },
    back() {
      this.$router.back()
    }
  },
  created() {
    if(this.$route.query.id) {
      this.curId = this.$route.query.id
      this.getDetail()
    }
    if(this.$route.query.type == 'look') {
      this.islook = true
    }
    this.getLevelList()
    this.getSfList()
    this.getSfList2()
    this.getSfList3()
  }
}
</script> 

<style lang="scss" scoped>
.w300{
  width: 300px;
}
.mr15{
  margin-right: 15px;
}
.footer{
  display: flex;
  justify-content: flex-end;
}
</style>